import { HttpErrorResponse } from '@angular/common/http';
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core';
import { CommonResponseVo } from 'src/app/model/common-response-vo';
import { ThreadsService } from 'src/app/services/threads.service';
import { UtilService } from 'src/app/services/util.service';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-report-form-embed',
  templateUrl: './report-form-embed.component.html',
  styles: [``],
  animations: [
    trigger('octrigger', [
      state('openS', style({
        bottom: '0'
      })),
      state('closeS', style({
        bottom: '-305px'
      })),
      transition('openS => closeS', [
        animate('500ms')
      ]),
      transition('closeS => openS', [
        animate('500ms')
      ]),
    ])
  ]
})
export class ReportFormEmbedComponent implements OnInit {
  public reportTitle: string = "举报";
  @Output('report')
  public reportEvent: EventEmitter<any>;
  //举报类型
  public reportTypes: CommonResponseVo[] = [];
  private opened: boolean = false;

  public data: { threads: number, reply: number, type: string, reason: string, token: string } = {
    threads: 0,
    reply: 0,
    type: '6',
    reason: '',
    token: ''
  };

  constructor(
    private elementRef: ElementRef,
    private renderer2: Renderer2,
    private threadsService: ThreadsService,
    private util: UtilService) {
    this.reportEvent = new EventEmitter<any>();
  }

  ngOnInit(): void {
    this.reportTypes = this.util.getCacheReportCategory();
    if(this.reportTypes.length === 0){
      this.getReportCategoryData();
      
    }
  }

  //缓存不存在再获取
  private getReportCategoryData(){
    this.threadsService.reportType().subscribe({
      next: response => {
        this.reportTypes = response;
        //缓存
        this.util.cacheReportCategory(this.reportTypes);
      },
      error: err => {
        let errMsg: string = '';
        if (err instanceof HttpErrorResponse) {
          if (err.error instanceof ErrorEvent) {
            errMsg = err.error.message;
          } else {
            errMsg = err.error;
          }
        } else if (err instanceof Error) {
          errMsg = err.message;
        } else { errMsg = err; }
        this.reportTypes.push({ id: '6', value: '其它' });
        console.log('[ReportForm-Embed]Error: ' + errMsg);
      },
      complete: () => {
        console.log('[ReportForm-Embed]Completed');
      }
    });
  }

  //切换举报话题的抽屉
  public toggleThreadsDrawer(threadsId: number): void {
    if (this.opened) {
      this.close();
    } else {
      this.openThreadsDrawer(threadsId);
    }
  }

  //切换举报回复的抽屉
  public toggleReplyDrawer(replyId: number): void {
    if (this.opened) {
      this.close();
    } else {
      this.openReplyDrawer(replyId);
    }
  }

  //关闭按钮
  public close(): void {
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '-305px');
    this.opened = false;
    //重置
    this.data.token = '';
    this.data.threads = 0;
    this.data.reply = 0;
    this.data.reason = '';
    this.data.type = '6';
  }

  //打开举报回复抽屉
  public openReplyDrawer(replyId: number): void {
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '0');
    this.opened = true;
    //赋值
    this.data.token = this.util.randomAlphaNumeric(8) || '123456';
    this.data.reply = replyId;
    this.reportTitle = "举报回复";
  }

  //打开举报话题抽屉
  public openThreadsDrawer(threadsId: number): void {
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '0');
    this.opened = true;
    //赋值
    this.data.token = this.util.randomAlphaNumeric(8) || '123456';
    this.data.threads = threadsId;
    this.reportTitle = "举报话题";
  }

  //提交
  public report(event: Event): void {
    //将举报信息传递到父组件,让父组件决定是举报:话题|回复
    this.reportEvent.emit(this.data);
  }

  //切换举报的类型
  public toggleType(currentType: string): void {
    this.data.type = currentType;
  }
}
